<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单向导</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

    <link href="./../../../static/plugins/jquery-smartwizard/css/smart_wizard_all.min.css" rel="stylesheet" />
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            表单向导
                        </div>
                        <div class="panel-body">
                            <!-- SmartWizard html -->
                            <div id="smartwizard">
                                <ul class="nav nav-progress">
                                    <li class="nav-item">
                                        <a class="nav-link" href="#step-1">
                                            <div class="num">1</div>
                                            第一步：帐号注册
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#step-2">
                                            <span class="num">2</span>
                                            第二步：绑定信息
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#step-3">
                                            <span class="num">3</span>
                                            第三步：选择偏好
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link " href="#step-4">
                                            <span class="num">4</span>
                                            第四步：体验应用
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content">
                                    <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                        <h3>第一步：帐号注册</h3>
                                        <p>首先进行帐号注册，确保填写注册信息。</p>
                                        <form class="form form-horizontal">
                                            <div class="form-group">
                                                <label class="control-label col-sm-2 is-required">姓名：</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="name" class="form-control" required
                                                        data-msg="请输入您的姓名" placeholder="请输入姓名">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">性别：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" required data-msg="请选择性别">
                                                        <option value="">请选择性别</option>
                                                        <option>男生</option>
                                                        <option>女生</option>
                                                        <option>保密</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2 is-required">年龄：</label>
                                                <div class="col-sm-8">
                                                    <input type="number" name="age" class="form-control" required
                                                        data-msg="请输入年龄" placeholder="请输入年龄">
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                    <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                        <h3>第二步：绑定信息</h3>
                                        <p>然后进行信息绑定，绑定个人身份信息。</p>
                                        <form class="form form-horizontal">
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">标题：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" required>
                                                        <option value="">请选择选项内容</option>
                                                        <option selected>选项内容一</option>
                                                        <option>选项内容二</option>
                                                        <option>选项内容三</option>
                                                        <option>选项内容四</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">标题：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" required>
                                                        <option value="">请选择选项内容</option>
                                                        <option selected>选项内容一</option>
                                                        <option>选项内容二</option>
                                                        <option>选项内容三</option>
                                                        <option>选项内容四</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">标题：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" required>
                                                        <option value="">请选择选项内容</option>
                                                        <option selected>选项内容一</option>
                                                        <option>选项内容二</option>
                                                        <option>选项内容三</option>
                                                        <option>选项内容四</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-sm-2">标题：</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control select2" required>
                                                        <option value="">请选择选项内容</option>
                                                        <option selected>选项内容一</option>
                                                        <option>选项内容二</option>
                                                        <option>选项内容三</option>
                                                        <option>选项内容四</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                        <h3>第三步：选择偏好</h3>
                                        选择您的偏好设置和功能。
                                    </div>
                                    <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
                                        <h3>第四步：体验应用</h3>
                                        开始尽情体验应用带来的快乐吧！
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/jquery-smartwizard/js/jquery.smartWizard.min.js"></script>

    <script>
        // Smart Wizard
        $('#smartwizard').smartWizard({
            selected: 0,
            autoAdjustHeight: true,
            enableURLhash: true, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            theme: 'arrows', // basic, arrows, square, round, dots
            transition: {
                animation: 'none' // none|fade|slideHorizontal|slideVertical|slideSwing|css
            },
            toolbar: {
                showNextButton: false, // show/hide a Next button
                showPreviousButton: false, // show/hide a Previous button
                position: 'bottom', // none/ top/ both bottom
                extraHtml: '<button class="btn btn-primary" id="prev_btn" onclick="previous()">上一步</button> <button id="next_btn" class="btn btn-primary" onclick="next()">下一步</button> <button id="finish_btn" class="btn btn-success" onclick="onFinish()">完成</button> <button class="btn btn-secondary" onclick="onCancel()">重置</button>'
            },
            anchor: {
                enableNavigation: false, // Enable/Disable anchor navigation 
                enableNavigationAlways: false, // Activates all anchors clickable always
                enableDoneState: true, // Add done state on visited steps
                markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
                unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
                enableDoneStateNavigation: true // Enable/Disable the done state navigation
            },
            disabledSteps: [], // Array Steps disabled
            errorSteps: [], // Highlight step with errors
            hiddenSteps: [], // Hidden steps
            // getContent: (idx, stepDirection, selStep, callback) => {
            //   console.log('getContent',selStep, idx, stepDirection);
            //   callback('<h1>'+idx+'</h1>');
            // }
        });

        // 显示步骤时将触发事件
        $("#smartwizard").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) {
            console.info("当前步骤：" + stepPosition);

            if (stepPosition === 'first') {
                $("#prev_btn").addClass('disabled');
                $("#next_btn").removeClass('disabled');
                $("#finish_btn").addClass('disabled');
            } else if (stepPosition === 'last') {
                $("#prev_btn").removeClass('disabled');
                $("#next_btn").addClass('disabled');
                $("#finish_btn").removeClass('disabled');
            } else {
                $("#prev_btn").removeClass('disabled');
                $("#next_btn").removeClass('disabled');
                $("#finish_btn").addClass('disabled');
            }
        });

        // 该事件在离开某个步骤之前触发
        $("#smartwizard").on("leaveStep", function (e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
            console.info("离开方向：" + stepDirection);
            console.info("离开前的步数：" + currentStepNumber);
            console.info("离开前往的步数：" + nextStepNumber);
            if (stepDirection == 'forward') {
                var form = $("#step-" + (currentStepNumber + 1)).find('.form');
                if (form.length > 0) {
                    return form.validate().form();
                }
                return true;
            }
            return true;
        });
        function onFinish() { alert('点击了完成按钮'); }
        function onCancel() { $('#smartwizard').smartWizard("reset"); }
        function previous() { $('#smartwizard').smartWizard("prev"); }
        function next() { $('#smartwizard').smartWizard("next"); }
    </script>
</body>

</html>